<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>添加试卷基本信息</title>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/popper.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.js"></script>
</head>

<body>
    <div id="app" class="container" style="padding: 100px 100px 10px;">
        <div class="input-group">
            <div class="col-sm-6">
                <div class="input-group">
                    <div class="col-sm-1">
                        <div style="border: 1px #0060ff solid;border-radius: 50%;width: 30px;height: 30px;text-align: center; color: white;background-color: #0060ff;">
                            <h4>1</h4>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <h5>基本信息</h5>
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="input-group">
                    <div class="col-sm-1">
                        <div style="border: 1px lightgray solid;border-radius: 50%;width: 30px;height: 30px;text-align: center; color: lightgray;">
                            <h4>2</h4>
                        </div>
                    </div>
                    <div class="col-sm-4" style="color: lightgray;">
                        <h5>试卷题目</h5>
                    </div>
                </div>
            </div>
        </div>

        <div style="margin-top:50px;margin-bottom: 50px;"></div>
        <!-- <form class="bs-example bs-example-form" role="form"> -->
        <div class="input-group" style="margin-top: 10px;align-items:center;">
            <div class="col-sm-2">
                <span class="input-group-addon"><span style="color: red;">*</span> 试卷名称：</span>
            </div>
            <div class="col-sm-6">
                <input class="form-control" v-model="name" @blur="nameValue()">
            </div>
        </div>
        <div id="paperNameDiv" class="col-sm-8" style="margin-top: 10px;display: none;">
            <div class="alert alert-danger" style="text-align: center;">
                请设置试卷名
            </div>
        </div>

        <div class="input-group" style="margin-top: 20px;align-items:center;">
            <div class="col-sm-2">
                <span class="input-group-addon "><span style="color: red; ">*</span>&nbsp;试卷分类：</span>
            </div>
            <div class="col-sm-6 ">
                <select v-model="paperClassificationId" class="form-control">
                    <option value="">请选则试卷分类</option>
                    <option v-for="classification in classifications" :value="classification.id">{{classification.name}}</option>
                </select>
            </div>
        </div>
        <div class="input-group" style="margin-top:10px;align-items:center;">
            <div class="col-sm-2">
                <span class="input-group-addon"><span style="color: red;">*</span>&nbsp;试卷类型：</span>
            </div>
            <div class="col-sm-6 ">
                <input type="radio" name="testType" value="1" v-model="testType"> 模拟试卷&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio" name="testType" value="2" v-model="testType"> 测评试卷&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio" name="testType" value="3" v-model="testType"> 其他
            </div>
        </div>
        <div class="input-group" style="margin-top: 10px;align-items:center; ">
            <div class="col-sm-2">
                <span class="input-group-addon"><span style="color: red;">&nbsp;&nbsp;</span>&nbsp;答题时长：</span>
            </div>
            <div class="col-sm-5">
                <input class="form-control" type="number" v-model="time" @blur="keepTime()">
            </div>
            <div class="col-sm-2">
                <span class="input-group-addon ">&nbsp;分钟</span>
            </div>
        </div>
        <div class="input-group" style="margin-top: 10px;align-items:center;">
            <div class="col-sm-2">
                <span class="input-group-addon"><span style="color: red;">*</span>&nbsp;&nbsp;及&nbsp;&nbsp;格&nbsp;&nbsp;线：</span>
            </div>
            <div class="col-sm-6">
                <input class="form-control" type="number" v-model="borderline" @blur="keepBorderline()">
            </div>
        </div>
        <div style="margin-top: 50px;" class="col-sm-8">
            <button class="btn btn-primary btn-lg btn-block" @click="nextStep()">下一步</button>
        </div>
        <!-- </form> -->
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                classifications: [],
                paperClassificationId: "",
                name: "",
                testType: "1",
                time: "120",
                borderline: "60",
                token: "",
                refreshToken: "",
                paperId: ""
            },
            mounted() {
                // this.token = this.storage.getItem("token");
                //  this.refreshToken = this.storage.getItem("refreshToken");
                axios.get("/paperClassification/all", {
                    headers: {
                        "Content-Type": "application/json;charset=utf8",
                        "token": this.token,
                        "refreshToken": this.refreshToken
                    }
                }).then(res => {
                    console.log(res);
                    this.classifications = res.data.data;
                });
                this.paperId = window.location.href.split("=")[1];
                console.info(this.paperId);
                if (this.paper != "" || this.paperId.length != 0) {
                    // this.token = this.storage.getItem("token");
                    //  this.refreshToken = this.storage.getItem("refreshToken");
                    axios.get("/paper/find/" + this.paperId, {
                        headers: {
                            "Content-Type": "application/json;charset=utf8",
                            "token": this.token,
                            "refreshToken": this.refreshToken
                        }
                    }).then(res => {
                        if (res.data != null) {
                            console.info(res.data.data)
                            var paper = res.data.data;
                            this.name = paper.name;
                            this.testType = paper.testType;
                            this.time = paper.time;
                            this.paperClassificationId = paper.classificationId;
                            this.borderline = paper.borderline;
                        }
                    })
                }
            },
            methods: {
                nextStep: function() {
                    if (this.name == "") {
                        $("#paperNameDiv").prop("style", "display:block");
                        return;
                    }
                    // this.token = this.storage.getItem("token");
                    //  this.refreshToken = this.storage.getItem("refreshToken");
                    axios.post("/paper/create", {
                        "id": this.paperId,
                        "name": this.name,
                        "testType": this.testType,
                        "classificationId": this.paperClassificationId,
                        "time": this.time,
                        "borderline": this.borderline
                    }, {
                        headers: {
                            "Content-Type": "application/json;charset=utf8",
                            "token": this.token,
                            "refreshToken": this.refreshToken
                        }
                    }).then(res => {
                        if (res.data.code == 200) {
                            let url = "/paper/addPaper_2.html?paperId=" + res.data.data;
                            //页面跳转
                            window.location.href = url;
                        }
                        if (res.data.code == 500) {
                            //TODO  弹出框
                            alert(" 系统出现错误，请稍后在访问")

                        }
                    })
                },
                nameValue: function() {
                    if (this.name == "") {
                        $("#paperNameDiv").prop("style", "display:block");
                    } else {
                        $("#paperNameDiv").prop("style", "display:none");
                    }
                },
                keepBorderline: function() {
                    var borderline_1 = this.borderline;
                    if (borderline_1 < 0) {
                        this.borderline = -borderline_1;
                    }
                    if (borderline_1 == 0) {
                        this.borderline = 60;
                    }
                    if ((borderline_1 % 1) > 0) {
                        this.borderline = borderline_1 - borderline_1 % 1;
                    }
                },
                keepTime: function() {
                    var time_1 = this.time;
                    if (time_1 < 0) {
                        this.time = -time_1;
                    }
                    if (time_1 == 0) {
                        this.time = 120;
                    }
                    if ((time_1 % 1) > 0 | (time_1 % 5) > 0) {
                        this.time = time_1 - time_1 % 1;
                        this.time = time_1 - time_1 % 5;
                    }
                }
            }





        })
    </script>
</body>

</html>